<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
  <script src="./index.js"></script>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="nav-bar">
    <!-- 顶部导航栏左边 -->
    <div class="nav-bar-left">
      <!-- 顶部导航栏左边图片 -->
      <a href="javascript:;">
        <img src="./images/logo.png" />
      </a>
    </div>
    <!-- 顶部导航栏右边 -->
    <div class="nav-bar-right">
      <!-- 顶部导航栏右边文本 -->
      <div class="nav-bar-right-texts">
        <a href="javascript:;">
          <div class="nav-bar-right-text-item">开发文档</div>
        </a>
        <a href="javascript:;">
          <div class="nav-bar-right-text-item">交流中心</div>
        </a>
        <a href="javascript:;">
          <div class="nav-bar-right-text-item">服务市场</div>
        </a>
        <a href="javascript:;">
          <div class="nav-bar-right-text-item">开源联盟</div>
        </a>
      </div>
      <!-- 顶部导航栏右边按钮 -->
      <button class="nav-bar-right-button">管理中心</button>
    </div>
  </div>
  <!-- 顶部内容 -->
  <div class="top">
    <!-- 顶部图片 -->
    <img class="top-image" src="./images/mainImage.png" alt="" srcset="">
    <!-- 顶部内容的文字 -->
    <div class="top-text">
      百度前端训练营2021开营了，赶紧报名吧！
    </div>
    <!-- 报名的表单 -->
    <div class="sign-up-from" id="signUpFrom">
      <!-- 报名的表单项 -->
      <div class="form-content" id="formContent">
        <div class="sign-up-from-item">
          <!-- 报名的表单的label -->
          <div class="sign-up-input-label">请选择您的学校</div>
          <!-- 报名的输入框 -->
          <div id="signUpArea">
            <input id="signUpAreaInput" placeholder="请选择您的学校" class="sign-up-input" readonly type="text">
          </div>
        </div>
        <div class="sign-up-from-item">
          <div class="sign-up-input-label">选择您的入学年份</div>
          <div id="signUpYear">
            <input id="signUpYearInput" placeholder="选择您的入学年份" readonly class="sign-up-input" type="text">
          </div>
        </div>
        <div class="sign-up-from-item">
          <div class="sign-up-input-label">请输入您的电子邮箱</div>
          <div><input class="sign-up-input" placeholder="请输入您的电子邮箱" id="signUpEmail" type="text"></div>
        </div>
        <div class="sign-up-from-item">
          <div class="sign-up-input-label"></div>
          <!-- 报名的按钮 -->
          <button class="sign-up-from-button" id="signUpBtn">报名</button>
        </div>

      </div>
      <!-- 完成报名的显示 -->
      <div style="display: none;" id="formSuuccess" class="form-success">
        您已完成报名，开始您的学习之旅吧！
        <div class="form-back" id="formBack">重新报名</div>
      </div>
    </div>
  </div>
  <!-- 我们的宗旨 -->
  <div class="common-wrapper">
    <div class="common-content">
      <!-- 我们的宗旨标题 -->
      <div class="our-aim-title">
        我们的宗旨
      </div>
      <!-- 我们的宗旨内容 -->
      <div class="our-aim-content">
        <!-- 我们的宗旨小内容模块 -->
        <div class="our-aim-content-item">
          <!-- 我们的宗旨小内容模块标题 -->
          <div class="our-aim-content-item-title">自律独立思考</div>
          <!-- 我们的宗旨小内容模块图片 -->
          <img class="our-aim-content-item-image" src="./images/aimImg/independentMind.jpg" />
        </div>
        <div class="our-aim-content-item">
          <div class="our-aim-content-item-title">实践</div>
          <img class="our-aim-content-item-image" src="./images/aimImg/pratice.jpg" />
        </div>
        <div class="our-aim-content-item">
          <div class="our-aim-content-item-title">总结回顾</div>
          <img class="our-aim-content-item-image" src="./images/aimImg/review.jpg" />
        </div>
        <div class="our-aim-content-item">
          <div class="our-aim-content-item-title">分享交流</div>
          <img class="our-aim-content-item-image" src="./images/aimImg/sharingAndCommunication.jpg" />
        </div>
      </div>
    </div>
  </div>
  <!-- 课程安排 -->
  <div class="common-wrapper">
    <div class="common-content">
      <!-- 课程安排标题 -->
      <div class="course-arrangement-title">
        课程安排
      </div>
      <!-- 标签页盒子 -->
      <div class="tabs-wrapper">
        <!-- 标签页 -->
        <div class="tabs">
          <!-- 标签页项 -->
          <div title="全部" class="tab tab-active">全部</div>
          <div title="HTML" class="tab">HTML</div>
          <div title="CSS" class="tab">CSS</div>
          <div title="JavaScript" class="tab">JavaScript</div>
        </div>
      </div>
      <!-- 课程安排内容 -->
      <div id="courseContent" class="course-content">
        <!-- 课程安排内容项 -->
        <div class="course-item">
          <!-- 课程安排内容项左边 -->
          <div class="course-item-left">
            <!-- 课程安排内容项左边图片 -->
            <img class="course-item-img" src="./images/courseArrangement.jpg" />
          </div>
          <!-- 课程安排内容项右边 -->
          <div class="course-item-right">
            <!-- 课程安排内容项右边标题 -->
            <div class="course-item-title">
              第一课 这里是课程名称
            </div>
            <!-- 课程安排内容项右边内容 -->
            <div class="course-item-content">
              这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。
            </div>
            <!-- 课程安排内容项的标签栏 -->
            <div class="tags">
              <div class="tag tag-HTML">HTML</div>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-left">
            <img class="course-item-img" src="./images/courseArrangement.jpg" />
          </div>
          <div class="course-item-right">
            <div class="course-item-title">
              第二课 这里是课程名称
            </div>
            <div class="course-item-content">
              这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。
            </div>
            <div class="tags">
              <div class="tag tag-CSS">CSS</div>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-left">
            <img class="course-item-img" src="./images/courseArrangement.jpg" />
          </div>
          <div class="course-item-right">
            <div class="course-item-title">
              第三课 这里是课程名称
            </div>
            <div class="course-item-content">
              这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。
            </div>
            <div class="tags">
              <div class="tag tag-JavaScript">JavaScript</div>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-left">
            <img class="course-item-img" src="./images/courseArrangement.jpg" />
          </div>
          <div class="course-item-right">
            <div class="course-item-title">
              第四课 这里是课程名称
            </div>
            <div class="course-item-content">
              这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。
            </div>
            <div class="tags">
              <!-- 各类标签项 -->
              <div class="tag tag-HTML">HTML</div>
              <div class="tag tag-CSS">CSS</div>
              <div class="tag tag-JavaScript">JavaScript</div>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-left">
            <img class="course-item-img" src="./images/courseArrangement.jpg" />
          </div>
          <div class="course-item-right">
            <div class="course-item-title">
              第五课 这里是课程名称
            </div>
            <div class="course-item-content">
              这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。
            </div>
            <div class="tags">
              <!-- 各类标签项 -->
              <div class="tag tag-HTML">HTML</div>
              <div class="tag tag-CSS">CSS</div>
              <div class="tag tag-JavaScript">JavaScript</div>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-left">
            <img class="course-item-img" src="./images/courseArrangement.jpg" />
          </div>
          <div class="course-item-right">
            <div class="course-item-title">
              第六课 这里是课程名称
            </div>
            <div class="course-item-content">
              这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。
            </div>
            <div class="tags">
              <!-- 各类标签项 -->
              <div class="tag tag-HTML">HTML</div>
              <div class="tag tag-CSS">CSS</div>
              <div class="tag tag-JavaScript">JavaScript</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部盒子 -->
  <div class="bottom-wrapper">
    <!-- 底部内容 -->
    <div class="bottom-content">
      <!-- 底部左边内容 -->
      <div class="bottom-content-left">
        <!-- 底部图片 -->
        <div class="bottom-content-left-content">
          <img class="bottom-content-left-img" src="./images/bottom/letter-i.png" alt="">
        </div>
        <div class="bottom-content-left-content">
          <img class="bottom-content-left-img" src="./images/bottom/letter-f.png" alt="">
        </div>
        <div class="bottom-content-left-content">
          <img class="bottom-content-left-img" src="./images/bottom/letter-e.png" alt="">
        </div>
      </div>
      <!-- 底部右边内容 -->
      <div class="bottom-content-right">
        <!-- 底部右边内容项 -->
        <div class="bottom-content-right-item">
          <!-- 底部右边内容项标题 -->
          <div class="bottom-content-right-item-title">
            Links
          </div>
          <!-- 底部右边内容项文本 -->
          <div class="bottom-content-right-item-texts">
            <!-- 底部右边内容项文本项 -->
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术</a></div>
          </div>

        </div>
        <div class="bottom-content-right-item">
          <div class="bottom-content-right-item-title">
            Links
          </div>
          <div class="bottom-content-right-item-texts">
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术</a></div>
          </div>

        </div>
        <div class="bottom-content-right-item">
          <div class="bottom-content-right-item-title">
            Links
          </div>
          <div class="bottom-content-right-item-texts">
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术培训中心</a></div>
            <div class="bottom-content-right-item-text"><a href="javascript:;">百度技术</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>